<template>
  <div class="common-layout">
    <div class="container-left" :style="`width:${conLeftWidth}px ;`">
      <Aside :collapse="collapse"></Aside>
    </div>
    <div class="container-right" :style="`width:${conRightWidth}px ;`">
      <Header @collapseShow="collapseShow" :collapse="collapse"></Header>
      <Main></Main>
    </div>
  </div>
</template>

<script setup lang="ts">
import Aside from "./components/aside.vue";
import Header from "./components/header.vue";
import Main from "./components/main.vue";
import { ref, onUnmounted, onMounted, watch, nextTick } from "vue";
const collapse = ref(false);
const screenWidth = ref(window.innerWidth);
const conLeftWidth = ref<any>(200); // 初始值可以是 'auto' 或其他任意值
const conRightWidth = ref<any>(""); // 初始值可以是 'auto' 或其他任意值
const collapseShow = (value: any) => {
  collapse.value = value;
  init();
};
const handleResize = () => {
  screenWidth.value = window.innerWidth;
  collapse.value = screenWidth.value < 750;
  init();
};

const init = () => {
  nextTick().then(() => {
    const bodyDome = document.getElementsByTagName("body")[0];
    if (collapse.value == true) {
      conLeftWidth.value = 65;
      const arrowArr: any = document.getElementsByClassName(
        "el-sub-menu__icon-arrow"
      );
      conRightWidth.value = bodyDome.clientWidth - conLeftWidth.value;
      if (arrowArr) {
        for (let i = 0; i < arrowArr.length; i++) {
          // 设置每个元素的样式
          arrowArr[i].style.display = "none"; // 例如，将箭头颜色设置为红色
          // ... 你可以设置其他任何CSS样式属性
        }
      }
    } else {
      conLeftWidth.value = 200;
      conRightWidth.value = bodyDome.clientWidth - conLeftWidth.value;
    }
  });
};
onMounted(() => {
  const bodyDome = document.getElementsByTagName("body")[0];
  conRightWidth.value = bodyDome.clientWidth;
  window.addEventListener("resize", handleResize);
  handleResize();
});
onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
});
</script>
<style lang="scss" scoped>
.common-layout {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  background-color: $main-layout-bgc;

  .container-left {
    height: 100%;
  }

  .container-right {
    height: 100%;
    overflow: hidden;
  }
}
</style>
